<template>
  <KView class="auction-price-view">
    <KView class="auction-price-view-input">
      <KView class="auction-price-view-subtraction" v-if="auction.type===1">
        <sys-svg name="subtraction" color="#dadada" @click="subtractPrice"></sys-svg>
      </KView>
      <KView class="auction-price-view-data">
        <KView class="auction-price-view-value">{{auction.buyPrice}}</KView>
        <KView class="auction-price-view-text">
          <span v-if="auction.type===1">您将出价{{auction.buyPrice}}元</span>
          <span v-else-if="auction.isPay">支付成功</span>
          <span v-else>您将支付{{auction.buyPrice}}元</span>
        </KView>
      </KView>
      <KView class="auction-price-view-addition" v-if="auction.type===1">
        <sys-svg name="addition" color="#dadada" @click="addPrice"></sys-svg>
      </KView>
    </KView>

    <template v-if="auction.type===1">
      <KView v-if="auction.isJoin" class="auction-price-view-btn" @click="offerPrice">立即出价</KView>
      <KView v-else class="auction-price-view-btn" @click="toJoin">我要支付1元参加</KView>
    </template>
    <template v-else>
      <KView v-if="auction.isPay" class="auction-price-view-btn is-pay">恭喜您竞得本商品</KView>
      <KView v-else class="auction-price-view-btn" @click="paymentPrice">立即支付</KView>
    </template>

    <sys-dialog is-center is-middle :visible.sync="openDialog" :modal="false" :width="484" :height="478" :duration="1000">
      <img class="sys-img" :src="imgData.offerPriceSuccess" mode="aspectFit">
    </sys-dialog>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import GlobalData from 'utils/globalData';

  import SysSvg from 'common/sysSvg';
  import SysDialog from 'common/sysDialog';

  import AuctionApi from 'services/auctionApi';

  export default {
    props: {
      auction: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        imgData: GlobalData.images.oneAuction,
        openDialog: false
      };
    },

    methods: {
      subtractPrice() {
        this.auction.subtractPrice();
      },

      addPrice() {
        this.auction.addPrice();
      },

      offerPrice() {
        SystemUtil.showLoading('提交中...');
        AuctionApi.offerPrice(this.auction).then(() => {
          SystemUtil.hideLoading();
          this.openDialog = true;
          this.$emit('refresh-record');
        }).catch(() => {
          SystemUtil.hideLoading();
          this.$emit('refresh-record');
        });
      },

      paymentPrice() {
        this.$emit('payment-price', this.auction);
      },

      toJoin() {
        this.$emit('to-join', this.auction);
      }
    },

    components: {
      SysSvg,
      SysDialog
    }
  };

</script>

<style lang="scss">
  .auction-price-view {
    height: 100%;

    .auction-price-view-input {
      height: formatPx(100);
      position: relative;
      display: flex;
      margin-bottom: formatPx(40);

      .auction-price-view-data {
        flex: 1;
        text-align: center;

        .auction-price-view-value {
          font-size: formatPx(56);
          height: formatPx(60);
          line-height: formatPx(60);
          color: #fd5a3a;
          font-weight: bold;
        }

        .auction-price-view-text {
          font-size: formatPx(26);
          color: #999999;
        }
      }

      .auction-price-view-addition,
      .auction-price-view-subtraction {
        width: formatPx(92);
        padding-top: formatPx(4);

        .sys-svg {
          width: formatPx(92);
          height: formatPx(92);
        }
      }
    }

    .auction-price-view-btn {
      height: formatPx(88);
      line-height: formatPx(88);
      background: #fd5a3a;
      color: #ffffff;
      font-size: formatPx(26);
      text-align: center;
      border-radius: formatPx(44);

      &.is-pay {
        background: #e0e0e0;
      }
    }
  }

</style>
